<template>
  <!--个性化设置-->
  <section class="new-tab-page personalize-wrapper">
    <h3 class="personalize-header">个性化设置</h3>
    <div class="tab-box">
      <a class="tab-item" v-for="item in tabList" :key="item.name" :class="{active: currentTab === item.name}" @click="currentTab = item.name">{{item.text}}</a>
    </div>

    <component :is="currentTab"></component>
  </section>
</template>

<script>
import { mapMutations } from 'vuex'
import uploadLogo from './uploadLogo/index.vue'
import setTheme from './setTheme/index.vue'
import businessLogin from './businessLogin/index.vue'
import utils from '@/mixins/utils.js'
export default {
  name: 'personalize',

  mixins: [utils],

  components: {
    uploadLogo,
    setTheme,
    businessLogin
  },

  data () {
    return {
      currentTab: 'uploadLogo',
      tabList: [
        { name: 'uploadLogo', text: 'LOGO上传' },
        { name: 'setTheme', text: '主题色配置' },
        { name: 'businessLogin', text: '商家端登录图片设置' }
      ]
    }
  },

  methods: {
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/less/base/variables.less';
.personalize-wrapper {
  width: 1140px;
}
.personalize-header {
  height: 50px;
  line-height: 50px;
  color: @black;
  font-size: 16px;
  padding-left: 20px;
}
.tab-box {
  display: flex;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid @lightBorderColor;

  .tab-item {
    display: inline-block;
    width: 180px;
    color: @grey99;
    // font-size: 15px;
    font-weight: 600;
    text-align: center;
    letter-spacing: .5px;
    cursor: pointer;

    &.active {
      color: @blue;
      box-shadow: inset 0 -4px 0 @blue;
    }
  }
}

.settting-wrapper {
  width: 100%;
  padding: 40px;
  background-color: #FFF;
}
</style>
